<template>
	<view class="content">
		<view style="display: flex;flex-direction: column;align-items: flex-start;">
			<view class="top-line">
				直推总人数:{{total}}
			</view>
			<!-- <view class="top-line">
				团队总人数:{{allfans}}
			</view> -->
			<button @click="seePoups=!seePoups" >修改推荐人</button>
		</view>
		
		<view class="list">
			<view style="width: 100%;text-align: center;height: 80rpx;line-height: 80rpx;">
				<text>
					我的推荐人
				</text>
			</view>
			<view  >
				<view class="fanscontent">
					<view class="fanscontentleft">
						 <image mode="widthFix" :src="parent.headimgurl"></image> 
					</view>
					<view class="fanscontentcentet">
						<text class="fansnickname">{{parent.nickname}}</text>
						<text class="fansnickwechat">{{parent.wechat}}</text>
					</view>
					<view class="fanscontentright">{{parent.note}}</view>
				</view>
					<!-- <view class="item-flex flex-center">
						 <image mode="widthFix" :src="parent.headimgurl"></image> 
						<view>{{parent.nickname}}</view>
					</view>
					
					<!-- <view style="color: #666;">
						{{item.date}}
					</view> 
					
					
					<view>{{parent.note}}</view> -->
			</view>
			<view  style="width: 100%;text-align: center;height: 80rpx;line-height: 80rpx;">
				<text>
					我的粉丝
				</text>
			</view>
			<view  v-for="(item,index) in fans">
					<view :class=" item.order_cishu==1||item.order_cishu==2 ? 'fanscontent backgroundred': 'fanscontent'">
						<view class="fanscontentleft">
							 <image mode="widthFix" :src="item.headimgurl"></image> 
						</view>
						<view class="fanscontentcentet">
							<text class="fansnickname">{{item.nickname}}</text>
							<text class="fansnickwechat">{{item.wechat}}</text>
						</view>
						<view class="fanscontentright">{{item.note}}</view>
					</view>
					
					<!-- <view style="color: #666;">
						{{item.date}}
					</view> -->
					
					
					
			</view>
		</view>
		<view class="marke" v-show="seePoups">
			<view class="withdraw">
				<icon @click="seePoups=false" class="cancel" type="clear" size="24" color="#ccc"></icon>
				<view class="markeTitle">修改推荐人</view>
				<input class="moneyBox" type="digit" cursor-spacing="50px" placeholder="请输入推荐人UID" :value="uid"
					placeholder-class="tips" @blur="uidsss" />
				<!-- <view class="btnGroup item-flex flex-around">
					<button>取消</button>
				</view> -->
				<button @click="tijiao2">确定</button>
		
			</view>
		</view>
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo:'',
				
				allfans:'',
				fans:'',
				seePoups:false,
				uid:'',
				parent:[],
				total: 0, //数据量
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'more',
				contentText: {
					contentdown: ' ',
					contentrefresh: '加载中',
					contentnomore: ''
				}
			}
		},
		onLoad() {

uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					this.userinfo = res.data;
					//console.log(this.userinfo, '用户信息')
					if (this.userinfo == '') {
						console.log(userInfo, "00000");
						uni.navigateTo({
							url: `/pages/login/login`
						})
					}
					this.getuserfans()
				
				},
				fail: (res) => {
					uni.navigateTo({
						url: `/pages/login/login`
					})
				},
				
			});
		},
		onShow() {
			const res=  uni.getStorage({
			    key: 'userInfo',
			    success: (res)=> {
					
					if(res.data){
						//console.log(res.data,'ssssss')
			     this.userinfo=res.data
				 if(this.userinfo.member_id){
				 //this.getuseragain();
				// this. url="http://pth5.njkw668.com/#/pages/user/user?&pid="+this.userinfo.member_id
				 }
				 }
				 else{
					 window.location.href='https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9a8339b68f86cd01&redirect_uri=http%3A%2F%2Fpth5.njkw668.com%2F%23%2Fpages%2Fpublic%2Flogin&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect';
				 }
			    },
				fail: (res)=> {
				window.location.href='https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9a8339b68f86cd01&redirect_uri=http%3A%2F%2Fpth5.njkw668.com%2F%23%2Fpages%2Fpublic%2Flogin&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect';
				}
			});
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.getuserfans()
			}
		},
		methods: {
			uidsss(e) {
				this.uid = e.detail.value
			},
			async tijiao2() {
			
				const res = await this.$myRequest({
					url: 'index.php/api/user/changeparent',
					method: "POST",
					data: {
						"member_id": this.userinfo.member_id,
						"uid": this.uid,
						
					},
			
			
				})
				if (res.status == 200) {
					uni.showToast({
						title: res.data,
						icon: 'none'
					})
				}
			},
		async getuserfans(){
					const res=await    this.$myRequest({
					url:'index.php/api/user/fans2',
					method:"POST",
					data:{
						"member_id":this.userinfo.member_id,
						'page': this.current_page
					},
					
				
			})	
			uni.stopPullDownRefresh();
			if(this.current_page==1){
				this.allfans=res.data.children_number
				this.parent=res.data.parent
				this.fans = res.data.lmember.data
				this.total = res.data.lmember.total; //数据量
				this.current_page = res.data.lmember.current_page; //当前页码
				this.last_page = res.data.lmember.last_page; //总页码
				this.status = res.data.lmember.total == 0 ? 'noMore' : 'more';
			}else{
				this.fans = this.fans.concat(res.data.lmember.data); //数据 追加
				this.total = res.data.lmember.total; //数据量
				this.current_page = res.data.lmember.current_page; //当前页码
				this.last_page = res.data.lmember.last_page; //总页码
				this.status = res.data.lmember.current_page==res.data.lmember.last_page ? 'noMore' : 'more';
			}
			
			
		}
		}
	}
</script>

<style>
	.fanscontent{
		width: 100%;
		display: flex;
		padding: 20rpx;
		border-bottom: 1px solid #ccc;
	}
	.fanscontentleft{
		width: 25%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.backgroundred{
		background-color: #007aff;
		color: white;
		border-bottom: 1px solid white;
	}
	.fanscontentleft image{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
	.fansnickname{
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		overflow: hidden;
	}
	.fanscontentcentet{
		width: 50%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.fanscontentright{
		width: 25%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		text-align: center;
	}
	.marke {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.withdraw {
		width: 80%;
		background: #fff;
		border-radius: 20rpx;
		position: relative;
	}
	
	.markeTitle {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333;
		text-align: center;
		background: #f5f5f5;
		border-radius: 20rpx 20rpx 0 0;
	}
	
	.moneyBox {
		width: 90%;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 2rpx solid red;
		margin: 20rpx 5%;
		text-align: center;
		font-size: 42rpx;
		font-weight: bold;
		color: red;
	}
	
	.tips {
		font-size: 30rpx;
		color: #bebebe;
		text-align: center;
		font-weight: normal;
	}
	
	.withdraw button {
		width: 90%;
		margin: 20rpx 5%;
		margin-top: 40rpx;
		font-size: 32rpx;
		height: 88rpx;
		line-height: 88rpx;
		border: none;
		background: #007AFF;
		color: #fff;
	}
	
	.withdraw button::after {
		border: none;
	}
	
	.cancel {
		position: absolute;
		top: -20rpx;
		right: -20rpx;
		background: #fff;
		border-radius: 50%;
		z-index: 999;
	
	}
	.item-flex{
		display: flex;
		align-items: center;
	}
	.item-flex view{
		font-size: 28rpx;
	}
	.flex-center{
		justify-content:center;
	}
	page{
		background: #f5f5f5;
	}
	.top-line{
		width: 100%;
		padding: 10rpx 3%;
		font-size: 34rpx;
		color: #333;
		height: 64rpx;
		line-height: 64rpx;
	}
	.list{
		width: 100%;
		padding: 0 3%;
		background: #fff;
	}
	.list .line:last-child{
		border:none
	}
	.line{
		width: 100%;
		flex: 1;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 2rpx solid #ebebeb;
	}
	.line view{
		width: 100%;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.line image{
		width: 48rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}
</style>
